What is WebSocket?

WebSocket and STOMP Protocols

Websocket is a low-level protocol. It defines how a stream of bytes is transformed into frames, which contains a text or binary message. A WebSocket message itself does not have instructions about how to route or process it. Therefore, we need additional support to achieve two-way communication. With Spring Boot, we have STOPM.

STOMP is a simple text-based message protocol. With it, clients can send and receive messages to and from each other. STOMP is called HTTP for Web. It defines a handful of frame types that are mapped onto WebSockets frames, e.g., CONNECT, SUBSCRIBE, UNSUBSCRIBE, ACK, or SEND.

WebSocket - Create Project

Goto https://start.spring.io/ and name the Artifact - spring-boot-websocket

Add the following dependencies Web, WebSocket, Thymeleaf, DevTool

Download, unzip and import the project.

WebSocket Implementation - Model

The message we are sending containing the name of the sender. Therefore, we need to create a message containing the sender’s name.
It will be something like

public class Message {
  private String name;

  // getters and setters.
}

WebSocket - controller

WebSocket - Create Message Handling Controller

1. You need to build another model as described in the last video first.

2. After that, you need to create a controller with a @SendTo annotation which you will specific the message destination.

Now we need to enable the WebSocket and STOMP messaging in Spring Boot. To do that, we need to create a class named WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer and with @EnableWebSocketMessageBroker annotation.

You class will look like below:

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    }
}

And you need to implement two methods. The configureMessageBroker is used to configure the message broker. We want to 1) enable an in-memory message broker to carry the messges back to client on destination.

Then we want to set the application destination prefixes.

After that, you need to implement registerStompEndpoints method to register the endpoint. You will need to find a prefix for your endpoint. This will enable Spring’s STOMP support and SockJS fallback options, so that alternative messaging options may be used if WebSockets are not available.

WebSocket - Config

WebSocket - Creating View

1. You need to create a simple UI with a message input, and a button. User can enter message and send it.

2. You need to create two buttons to manage WebSocket connection. One is to connect, one is to disconnect.

3. You need to add javascript to send messages and receive messages from server side. You basically need to import sockjs and stomp javascript libraries to communicate with the server using STOMP. There are few functions needed to be implemented.

   • connect() -> to establish the connection to the endpoint. And making the stompClient subscribe to the prefix.
   • disconnect() -> disconnect from endpoint
   • sendMessage() -> send message with stopmClient.send when clicked.

WebSocket Implementation - Summary

Some of you might find this implementation extremely difficulty and some of you may get stuck because you are not familiar with Javascript or did not get the whole idea of WebSocket. Don’t worry about it. Please feel free to checkout the complete solution and compare each class or file with the implementation step.
Luckily, all WebSocket implementations look familiar, so once you figured out how to implement one application, you should have no problem to implement one yourself in future.

Solution: https://github.com/udacity/JDND/tree/master/demos/c1/spring-boot-websocket